<template>
  <div style="width: 1600px;margin: 10px 50px">
    <div style="margin-bottom: 10px;text-align: center;"><h2>AQUMON完成开户入金测试账号</h2></div>

    <span style='display:block;float: left;margin-left: 30px'>
      <el-form :inline="true" :model="flag_select" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="flag_select.select" placeholder="筛选账号">
          <el-option label="已使用" value="yes"></el-option>
          <el-option label="未使用" value="no"></el-option>
          <el-option label="全部" value="all"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit_search">查询</el-button>
      </el-form-item>
    </el-form>
    </span>
    <span style='display:block;float: right;margin-right: 50px'>
      <el-button type="primary" icon="el-icon-edit" @click="func_edit_batch_status()">批处理操作</el-button>
    </span>

    <DataBatchOperate :batch="edit_batch_status" :down_uids="download" @batch_events="func_get_batch_status" @batch_set="batch_flag_set"></DataBatchOperate>

    <el-table
      ref="acc_table"
      @selection-change="handle_selection_change"
      :data="tableData.slice((current_page-1)*10, current_page*10)"
      :default-sort = "{prop: ['create_time','USD','HKD','CNY'], order: 'descending'}"
      height="700px"
      border
      style="width: 100%;"
      :row-key="get_row_key">
      <el-table-column
        :reserve-selection="true"
        type="selection"
        width="50">
      </el-table-column>
      <el-table-column
        fixed
        prop="uid"
        label="uid"
        width="100px">
      </el-table-column>
      <el-table-column
        fixed
        prop="phone"
        label="phone"
        width="120px">
      </el-table-column>
      <el-table-column
        fixed
        prop="flag_usage"
        label="是否使用"
        width="100px">
      </el-table-column>
      <el-table-column
        fixed
        prop="is_hold"
        label="是否持仓"
        width="100px">
      </el-table-column>
      <el-table-column
        sortable
        prop="create_time"
        label="创建时间"
        width="180px">
      </el-table-column>
      <el-table-column
        prop="portfolios"
        label="持仓组合"
        width="350px">
      </el-table-column>
      <el-table-column
        prop="rebalance_advices"
        label="待调仓的组合"
        width="250px">
      </el-table-column>
      <el-table-column
        sortable
        prop="usd"
        label="可用现金USD"
        width="200px">
      </el-table-column>
      <el-table-column
        sortable
        prop="hkd"
        label="可用现金HKD"
        width="200px">
      </el-table-column>
      <el-table-column
        sortable
        prop="cny"
        label="可用现金CNY"
        width="200px">
      </el-table-column>
      <el-table-column
        prop="edit"
        label="编辑"
        width="500px">
        <template slot-scope="scope">
          <el-row>
            <el-tooltip class="tooltip" effect="dark" content="编辑" placement="top">
              <el-button type="primary" icon="el-icon-edit" circle @click="func_edit_single_status(scope.row.uid)"></el-button>
            </el-tooltip>
            <el-tooltip class="tooltip" effect="dark" content="删除" placement="top">
              <el-button type="danger" icon="el-icon-delete" circle @click="func_del_acc(scope.$index, scope.row.uid, tableData)"></el-button>
            </el-tooltip>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <edit-account :editbool="edit_single_status" @single_events="func_get_single_status"></edit-account>

    <div style="margin-top: 10px;margin-right:30px;float:right">
      <el-pagination
        background
        @current-change="handle_current_change"
        :current-page="current_page"
        :total="total_numbers"
        :page-size="page_size"
        layout="prev, pager, next">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import EditAccount from "@/components/data/EditAccount";
import DataBatchOperate from "@/components/data/DataBatchOperate";
import { aqm_get_all_accs, aqm_get_flag_accs, aqm_delete_acc,aqm_set_single_flag_accs,aqm_set_batch_flag_accs } from '@/api/account'
export default {
  name: 'AqmData',
  components:{
    EditAccount,
    DataBatchOperate
  },
  data() {
    return {
      download: [],
      current_page: 1,  // 初始页
      page_size: 10,    // 每页展示的数据条数
      total_numbers: 1,

      single_uid: '',
      edit_batch_status: false,
      edit_single_status: false,
      flag_select: {
        select: 'all'
      },
      tableData: [
      {
        uid: '100010121',
        phone: '18112341234',
        flag_usage: 'yes',
        create_time: '2022-04-14 15:16:54',
        is_hold: 'yes',
        portfolios: '3180,2310,2160,55_4,4411,33_5,33_4,33_3,33_2,33_1,32_1,32_2,32_3,32_4,32_5,3140,2170,3110,3210,3310,4410,4510,2130,3000',
        rebalance_advices: '3180',
        usd_hkd_cny:{'USD':20200, 'HKD':43000.34, 'CNY':12345}
      },
      {
        uid: '100010122',
        phone: '18112341234',
        flag_usage: 'yes',
        create_time: '2022-04-15 15:16:54',
        is_hold: 'yes',
        portfolios: '4411,33_5,33_4,33_3,33_2,33_1,32_1,32_2,32_3,32_4,32_5,3140,2170,3110',
        rebalance_advices: '3180',
        usd_hkd_cny:{'USD':20400, 'HKD':45000.34, 'CNY':15345}
      }
      ]
    }
  },
  methods: {
    submit_search(){
      console.log('筛选选择：',this.flag_select.select)
      aqm_get_flag_accs(this.flag_select.select).then(
        (resolve) => {
          console.log('请求结果 this.tableData=', resolve.data)
          this.tableData = resolve.data
          this.total_numbers = this.tableData.length;
        }
      )
        .catch(
          (err) =>{
            console.log('get_flag_accs 异常结果：',err)
          }
        )
    },
    func_edit_batch_status(){
      this.edit_batch_status = true;

      let select_row = this.$refs.acc_table.selection;
      let uid_list = [];
      for (let i=0;i<select_row.length;i++){
        let uid = select_row[i].uid;
        uid_list.push(uid);
      }
      this.download = uid_list;  // 可能被下载的uid列表
    },
    func_get_batch_status(){
      this.edit_batch_status = false;
    },
    batch_flag_set(flag){
      console.log('------------batch flag=', flag);
      console.log('------------batch selection=', this.$refs.acc_table.selection);
      let select_row = this.$refs.acc_table.selection;
      let uid_list = [];
      for (let i=0;i<select_row.length;i++){
        let uid = select_row[i].uid;
        uid_list.push(uid);
      }
      console.log('------------ uid_list=',uid_list);
      aqm_set_batch_flag_accs(uid_list, flag).then(
        (resolve) => {
          console.log('set_batch_flag_accs 请求 this.tableData=', resolve.data);
          this.tableData = resolve.data;
          // this.total_numbers = this.tableData.length;
        }
      )
        .catch(
          (err) =>{
            console.log('set_batch_flag_accs 异常结果：',err);
          }
        )
    },
    handle_selection_change(val){
      console.log('选择的行数据val=', val)
    },
    get_row_key(row){
      return row.id
    },

    func_edit_single_status(uid){
      this.edit_single_status = true;
      this.single_uid = uid;
      console.log('start-------------');
    },
    func_get_single_status(value){
      console.log('middle -------------')
      this.edit_single_status = false;
      if(value && this.single_uid){
        aqm_set_single_flag_accs(this.single_uid, value)
          .then(
            (resolve) => {
              console.log('set_single_flag_accs 请求 this.tableData=', resolve.data)
              this.tableData = resolve.data
              // this.total_numbers = this.tableData.length;
            }
          )
          .catch(
            (err) =>{
              console.log('set_single_flag_accs 异常结果：',err)
            }
          )
      }
      console.log('end-------------');
    },
    func_del_acc(index, uid, td){
      console.log('delete')
      this.$confirm('此操作将删除该数据, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        td.splice(index, 1)
        console.log('index=',index)
        console.log('uid=',uid)
        aqm_delete_acc(uid)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除！'
        });
      });
    },
    handle_current_change(val){
      console.log('当前页号val=', val);
      this.current_page = val;
    },
  },
  created() {
    // console.log('tableData11111111111111')
    aqm_get_all_accs().then(
      (resolve) => {
        console.log('请求结果 this.tableData=', resolve.data)
        this.tableData = resolve.data;
        this.total_numbers = this.tableData.length;

      }
    )
    .catch(
      (err) =>{
        console.log('get_all_accs 异常结果：',err)
      }
    )
    // console.log('tableData222222222222')
  },
  computed: {}
}
</script>

<style scoped>

</style>
